<template>
  <div class="cmscomen newAccountNumber">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span>账号管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">账号充值申请</span>
      </div>
      <div class="titleName">账号充值申请</div>
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="* 产品名称">
            <div>123</div>
          </el-form-item>
          <el-form-item label="* 账号名称">
            <div>123</div>
          </el-form-item>
          <el-form-item label="充值金额" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">申请充值</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data(){
    return{
        ruleForm: {
            name: '',
            desc: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
    }
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created(){
  },
  methods:{
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
.newAccountNumber .titleName{
  font-size: 18px;
  font-weight: 700;
  padding-left: 40px;
  padding-bottom: 30px;
  padding-top: 10px;
}
.newAccountNumber .topMenu{
  padding-left: 40px;
}
.newAccountNumber .el-form{
  padding-left: 40px;
}
.newAccountNumber .el-form-item__label{
  text-align: left;
}
.newAccountNumber .el-form-item__content .el-input{
  width: 217px;
}
.newAccountNumber .el-col{
  /* padding-right: 40px; */
}
</style>


